{{ define "content" }}
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h1>注册用户</h1>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#createUser"
                aria-expanded="false" aria-controls="createUser">
                创建用户
            </button>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="collapse" id="createUser">
                <div class="card">
                    <div class="card-body">
                        <form id="createUserForm">
                            <div class="form-group">
                                <label for="username">用户名</label>
                                <input type="text" class="form-control" name="username" id="username"
                                    placeholder="请输入用户名">
                            </div>
                            <div class="form-group">
                                <label for="password">密码</label>
                                <input type="password" class="form-control" name="password" id="password"
                                    placeholder="请输入密码">
                            </div>
                            <div class="form-check">
                                <label class="form-check-label">
                                    <input type="checkbox" class="form-check-input" name="enable" id="enable" checked>
                                    启用账户
                                </label>
                            </div>
                            <button type="submit" class="btn btn-primary">提交</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <table class="table">
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>用户名</th>
                        <th>密码</th>
                        <th>是否启用</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    {{ range .users }}
                    <tr>
                        <td scope="row">{{.Id}}</td>
                        <td class="myUsername">{{.Username}}</td>
                        <td>{{.Password}}</td>
                        <td>{{.Enable}}</td>
                        <td><a href="#" class="badge badge-primary" data-toggle="modal" data-target="#modalId1">修改密码</a>
                        </td>
                    </tr>
                    {{ end }}
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="modalId1" tabindex="-1" role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">修改账户信息</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <form id="changePassForm">
                        <div class="form-group">
                          <label for="#changePassFormUsername">用户名</label>
                          <input type="text"
                            class="form-control" name="username" id="changePassFormUsername" placeholder="">
                        </div>
                        <div class="form-group">
                          <label for="#changePassFormPass">新密码</label>
                          <input type="text"
                            class="form-control" name="password" id="changePassFormPass" placeholder="">
                        </div>
                    </form>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="changePasswordSubmit()">保存</button>
            </div>
        </div>
    </div>
</div>

{{end}}

{{ define "js" }}
<script>
    function getPassFormInfo(element) {
        let username = element.parent().prevAll().filter(".myUsername").eq(0).text();
        return username
    }

    function changePasswordSubmit() {
        let password = $("#changePassFormPass").val();
        if(password === ""){
            toastr.warning("密码无效");
        }
        $.post("/changepass", $("#changePassForm").serialize(),function(data){
            if(data.error === 0){
                toastr.success(data.message);
                window.location.reload();
            } else {
                toastr.error(data.message);
            }
        },"json");
    }

    $(function () {
        $("#createUserForm").submit(function () {
            $.post('/createuser_data', $(this).serialize(), function (data) {
                if (data.error === 0) {
                    toastr.success(data.message);
                    window.location.reload();
                } else {
                    toastr.error(data.message);
                }
            }, "json");
            return false;
        });
        $('#modalId1').on('show.bs.modal', event => {
            var button = $(event.relatedTarget);
            var modal = $(this);
            // Use above variables to manipulate the DOM
            let username = getPassFormInfo(button);
            console.log(username);
            $("#changePassFormUsername").val(username);
        });
    });
</script>
{{end}}